<template>
  <div>
    <div class="applyHeader">
      <h2><span>退换货申请</span></h2>
      <el-button>刷新</el-button>
    </div>
    <div class="mainBg">
      <div class="mainBg_heard">
        <span>退换货申请详情</span>
      </div>
      <div class="mainBg_table">
        <table :data="ReturnList">
          <tr>
            <td class="text">订单编号</td>
            <td class="content">{{ ReturnList.refundId }}</td>
          </tr>
          <tr>
            <td class="text">申请状态</td>
            <td class="content">{{ isRefundSts }}</td>
          </tr>
          <tr>
            <td class="text">申请时间</td>
            <td class="content">{{ ReturnList.applyTime }}</td>
          </tr>
          <tr>
            <td class="text">用户账号</td>
            <td class="content">{{ ReturnList.userName }}</td>
          </tr>
        </table>
        <table :data="ReturnList">
          <tr>
            <td class="text">订单金额</td>
            <td class="content">{{ ReturnList.orderAmount }}</td>
          </tr>
          <tr>
            <td class="text">确认金额</td>
            <td class="content">{{ ReturnList.orderAmount }}</td>
          </tr>
          <tr>
            <td class="text">退款方式</td>
            <td class="content">{{ isPayType }}</td>
          </tr>
          <tr>
            <td class="text">售后类型</td>
            <td class="content">{{ isApplyType }}</td>
          </tr>
          <tr>
            <td class="text">申请原因</td>
            <td class="content">{{ ReturnList.buyerMsg }}</td>
          </tr>
          <tr>
            <td class="text">处理意见</td>
            <td class="content" v-bind="handlingOpinions">{{ endRefundSts }}</td>
          </tr>
        </table>
        <template v-if="showClose">
          <table :data="ReturnList">
            <tr class="int">
              <td class="text">处理备注</td>
              <td class="content">
                <el-input v-model="remarks" placeholder="请输入备注信息"></el-input>
              </td>
            </tr>
          </table>
          <div class="divBtn">
            <el-row>
              <el-button type="primary" @click="enterReturn">确认退货</el-button>
              <el-button type="danger" @click="refuseReturn">拒绝退货</el-button>
            </el-row>
          </div>
        </template>
        <template v-if="showDiv">
          <table :data="ReturnList">
            <tr>
              <td class="text">处理人</td>
              <td class="content">{{ ReturnList.shopId }}</td>
            </tr>
            <tr class="int">
              <td class="text">处理备注</td>
              <td class="content">
                <el-input v-model="remarks" placeholder="请输入备注信息">
                </el-input>
              </td>
            </tr>
            <tr>
              <td class="text">处理时间</td>
              <td class="content">{{ ReturnList.handelTime }}</td>
            </tr>
          </table>
          <div class="divBtn">
            <el-row>
              <el-button type="primary" @click="amendRemarks">修改处理备注</el-button>
            </el-row>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>
<script>
import { mapActions } from "vuex";
export default {
  name: 'ReturnPending',
  data() {
    return {
      ReturnList: {},
      showClose: true,
      showDiv: false,
      handlingOpinions: '',
      remarks: ''
    }
  },
  computed: {
    isRefundSts() {
      if (this.ReturnList.refundSts == 1) {
        return '待审核'
      }
      if (this.ReturnList.refundSts == 2) {
        return '已处理'
      }
      if (this.ReturnList.refundSts == 3) {
        return '已拒绝'
      }
    },
    isPayType() {
      if (this.ReturnList.payType == 1) {
        return '微信支付'
      }
      if (this.ReturnList.payType == 2) {
        return '支付宝'
      }
    },
    isApplyType() {
      if (this.ReturnList.applyType == 2) {
        return '退货/退款'
      }
      if (this.ReturnList.applyType == 3) {
        return '换货'
      }
    },
    endRefundSts() {
      if (this.ReturnList.refundSts == 1) {
        return ''
      }
      if (this.ReturnList.refundSts == 2) {
        return '同意退货'
      }
      if (this.ReturnList.refundSts == 3) {
        return '拒绝退货'
      }
    },
  },
  methods: {
    ...mapActions('order', ['Requirements', 'PutConfirmRefundBy', 'offRefund', 'ChangRemarks']),

    reloadPage() {
      location.reload();
      this.$route.go("0")
    },

    //同意退货
    enterReturn() {
      let refundId = this.ReturnList.refundId;
      let remarks = this.remarks;
      let handlingOpinions = this.handlingOpinions;

      this.PutConfirmRefundBy({ refundId, handlingOpinions, remarks }).then((data) => {
        console.log(data);
        this.$message({
          showClose: true,
          message: '同意退货申请成功'
        });
      });
      this.showClose = false;
      this.showDiv = true
      //刷新渲染页面
      this.$router.push('/home/Order/OrderApply')

    },
    //拒绝退货
    refuseReturn() {
      let refundId = this.ReturnList.refundId;
      let remarks = this.remarks;
      let handlingOpinions = this.handlingOpinions;
      this.offRefund({ refundId, handlingOpinions, remarks }).then((data) => {
        console.log(data);
        this.$message({
          showClose: true,
          message: '拒绝退货申请成功'
        });
      });
      this.showClose = false;
      this.showDiv = true;
      this.$router.push('/home/Order/OrderApply')
    },

    //修改备注
    amendRemarks() {
      let refundId = this.ReturnList.refundId;
      let remarks = this.remarks;
      this.ChangRemarks({ refundId, remarks }).then((data) => {
        console.log(data);
        this.$message({
          showClose: true,
          message: '修改备注成功'
        });
      });
      this.showClose = true;
      this.showDiv = false;
      this.$router.push('/home/Order/OrderApply')
    }



  },
  created() {
    const refundId = this.$route.query.refundId;
    console.log(refundId);
    this.Requirements(refundId).then(res => {
      console.log(res);
      this.ReturnList = res.data
    })
  },
  mounted() {

  },
}
</script>
<style scoped>
.applyHeader {
  height: 50px;
  line-height: 50px;
  box-sizing: border-box;
  background-color: #f0f0f0;
  overflow: hidden;
}

.applyHeader h2 {
  float: left;
}

.applyHeader span {
  font-size: 18px;
  font-weight: 400;
  border-left: 6px solid #1CB09A;
  padding-left: 16px;
  margin-left: 20px;
  height: 25px;
  line-height: 25px;
}

.applyHeader button {
  float: right;
  color: #fff;
  background-color: #1cb09a;
  margin-right: 20px;
  border-style: none;
  border-radius: 4px;
  padding: 8px 12px;
  margin-top: 10px;
}

.mainBg {
  width: 95%;

  margin: 30px auto;
  background-color: #fff;
}

.mainBg_heard {
  height: 50px;
  background-color: #f0f0f0;
  line-height: 50px;
  margin-bottom: 30px;
}

.mainBg_heard span {
  font-size: 18px;
  padding-left: 18px;
}

.mainBg_table {
  margin-left: 20px;
  margin-right: 20px;
}

table {
  width: 100%;
  margin-bottom: 16px;
  border-spacing: 0;
}

table td {
  border: 1px solid rgba(0, 0, 0, .04) !important;
  height: 40px;

}

table>tr>td:first-child {
  color: rgba(0, 0, 0, .5);
  font-weight: 600;
}

table>tr>td:last-child {
  padding-left: 20px;
  color: rgba(0, 0, 0, .6);
}

.content {
  border: none;
}

.el-input.is-disabled .el-input__inner {
  background-color: white;
}

/* tr {
  display: block;
  border: 1px solid red;
} */
.text {
  width: 20%;
  background-color: rgba(28, 176, 154, 0.05);
  text-align: center;
}

::v-deep .el-input__inner {
  background-color: white !important;
  border-radius: 0;
}

.divBtn {
  text-align: center;
  margin-top: 50px;
}

.divBtn button {
  display: inline-block;
  padding: 12px 20px;
}

.divBtn button span {
  display: inline-block;
  width: 56px;
  height: 14px;
}

.int>td:last-child {
  border-style: none;
  padding: 0px;
}
</style>
  